<template>
  <div style="width: 100%;
  height: 100%;">
    <div style="width: 95%;
  height: 140%;
  position: relative;
  left: 50%;transform: translateX(-50%);
  padding:20px 80px 0px 80px;display: flex;justify-content: space-around;">
      <el-select v-if="dzJks.indexOf('selectRoleNoByRId') != -1 && dzJks.indexOf('empowered') != -1"
                 v-model="selRole_id"
                 placeholder="请选择" @change="changeRole">
        <el-option v-for="item in roles" :key="item.roleBh" :label="item.roleMc" :value="item.roleBh">
        </el-option>
      </el-select>
      <!-- 非懒加载    -->
      <el-tree ref="tree"
               v-if="dzJks.indexOf('selectAllPermission') != -1 && dzJks.indexOf('selectMIdByRId') != -1 && dzJks.indexOf('selectMIdAIdByRId') != -1"
               :data="Permissions" :show-checkbox="dzJks.indexOf('empowered') != -1" node-key="id"
               :default-expanded-keys="hasMenu_id" :default-checked-keys="hasAction_id" :expanded="false"
               :props="{ children: 'children', label: 'label' }" @check="currentChecked" check-strictly>
      <span class="custom-tree-node"
            style="display: flex;justify-content: space-between;width: 300px;height: 50px;align-items: center;"
            slot-scope="{ node, data}">
        <span>{{ node.label }}</span>
        <span>
          <el-tag v-if="data.id > 3000 && data.id < 3999" type="success">菜单</el-tag>
          <el-tag v-if="data.id > 4000 && data.id < 4999">动作</el-tag></span>
      </span>
      </el-tree>


    </div>
    <el-dialog title="添加权限" :visible.sync="dialogVisible" width="30%">
      <span>您确定要为&nbsp;&nbsp;<span style="color: blueviolet;">{{ selRole_name }}&nbsp;&nbsp;</span>
      {{ act }}&nbsp;&nbsp;<span style="color: orangered;">{{ per_name }}</span>&nbsp;&nbsp;权限吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="changeRole()">取 消</el-button>
        <el-button type="primary" @click="empowered()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "../axios/axios.js"
import {selectRoleNoByRId} from "../api/role.js"
import {selectAllPermission, empowered} from "../api/permission.js"

export default {
  data() {
    return {
      Permissions: [],
      roles: [],
      selRole_id: "",
      selRole_name: "",
      hasMenu_id: [],
      hasAction_id: [],
      dzJks: [],
      dialogVisible: false,
      per_id: "",
      per_name: "",
      act: ""
    }
  },
  created() {
    this.showAllPer()
    this.dzJks = localStorage.getItem("dzJks").split(",")
    selectRoleNoByRId().then(res => {
      if (res.code == "200") {
        this.roles = res.data
        this.selRole_id = res.data[0].roleBh
        this.selRole_name = res.data[0].roleMC
        this.selectMId()
        this.selectAId()
      }

    })
  },
  methods: {
    selectMId() {
      axios({
        method: "POST",
        url: "/permission/selectMIdByRId/" + this.selRole_id
      }).then(res => {
        if (res.code == "200") {
          this.hasMenu_id = res.data
        }

      })
    },
    selectAId() {
      axios({
        method: "POST",
        url: "/permission/selectMIdAIdByRId/" + this.selRole_id
      }).then(res => {
        if (res.code == "200") {
          this.hasAction_id = res.data
        }
      })
    },
    showAllPer() {
      selectAllPermission().then(res => {
            if (res.code == "200") {
              this.Permissions = JSON.parse(JSON.stringify(res.data))
            }
      })
    },
    changeRole() {
      this.roles.forEach(element => {
        if (element.roleBh == this.selRole_id) {
          this.selRole_name = element.roleMc
        }
      });
      this.showAllPer()
      this.selectMId()

      this.selectAId()
      this.dialogVisible = false
    },
    currentChecked(nodeObj) {
      this.per_id = nodeObj.id
      this.per_name = nodeObj.label
      this.hasMenu_id.push(this.per_id)
      this.dialogVisible = true;
      const isCheck = this.$refs.tree.getCheckedNodes().indexOf(nodeObj) > -1
      if (isCheck) {
        this.act = "新增"
      } else {
        this.act = "撤销"
      }
    },
    empowered() {
      empowered({
        roleBh: this.selRole_id,
        perBh: this.per_id
      }).then(res => {
        if (res.code == "200") {
          this.$message({
            message: res.msg,
            type: "success"
          })
          this.showAllPer()
          this.selectMId()
          this.selectAId()
          this.dialogVisible = false
        } else {
          this.$message.error(res.msg)
        }
      })
    }
  }

}
</script>

<style></style>
